<template lang="pug">
  div(:class='{"mobile-page":isMobile}')

    pc-header(v-if='!isMobile')
    mobile-header(v-else)
    .content(:class="{'pc':!isMobile}")
      transition(name="fade").nuxt
        nuxt

    mobile-footer(v-if="isMobile")
    pc-footer(v-else)

    v-toanywhere(v-if="!isMobile")
</template>

<script>
  import { mapState } from 'vuex'
  import { MobileHeader, MobileFooter } from '~/components/layout/mobile'
  import { PcHeader, PcFooter } from '~/components/layout/pc'

  export default {
    name: 'app',
    components: {
      PcHeader,
      PcFooter,
      MobileHeader,
      MobileFooter
    },
    data () {
      return {
        _scrollTop: 0
      }
    },
    computed: {
      ...mapState('view', ['isMobile', 'scrollTop'])
    },
    methods: {
      // 设置字体 全局使用 rem
      setFontSize () {
        if (!this.isMobile) {
          document.documentElement.style.fontSize = 100 + 'px'
        } else {
          document.documentElement.style.fontSize = document.documentElement.offsetWidth / 3.75 + 'px'
        }
      },
      // 获取当前页面 滚动高度
      initStoreScrollTop () {
        this._scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop
        this.$store.commit('view/SET_SCROLLTOP', this._scrollTop)
      }
    },
    created () {
      if (process.browser) {
        this.setFontSize()
        this.initStoreScrollTop()
        window.onresize = () => { this.setFontSize() }
        window.onscroll = (e) => { this.initStoreScrollTop() }
      }
    }
  }
</script>

<style lang="stylus" scoped>
.content
  margin 0 auto
  &.pc
    box-sizing border-box
    min-height 100vh
    padding-top $pcHeaderHeight
    padding-bottom $pcFooterHeight
</style>
